<template>
  <div class="pad_20">
    <el-form ref="formData" :model="formData" label-width="110px" :rules="rules">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>基础信息</span>
        </div>
      </div>
      <el-form-item label="会员卡名称" prop="name">
        <el-input type="text" v-model="formData.name" placeholder="请输入会员卡名称"></el-input>
      </el-form-item>
      <el-form-item label="会员卡公告" prop="notice">
        <el-input type="textarea" v-model="formData.notice" placeholder="请输入会员卡公告"></el-input>
      </el-form-item>
      <el-form-item label="会员卡标题" prop="title">
        <el-input type="text" v-model="formData.title" placeholder="请输入会员卡标题"></el-input>
      </el-form-item>
      <el-form-item label="会员卡简介" prop="introduction">
        <el-input type="textarea" v-model="formData.introduction" placeholder="请输入会员卡简介"></el-input>
      </el-form-item>
      <el-form-item label="会员背景图" prop="introduction">
        <custom-upload @click="openImg('cashierIcon')" @close="formData.vipBg = ''" :img-src="formData.vipBg"></custom-upload>
      </el-form-item>
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>价格设置</span>
        </div>
      </div>
      <el-form-item label="售卖规格" prop="dayArr">
        <el-table :data="formData.dayArr">
          <el-table-column label="标题" align="center">
            <template slot-scope="scoped">
              <el-input type="text" style="width: 200px;" v-model="scoped.row.title" placeholder="请输入标题"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="副标题" align="center">
            <template slot-scope="scoped">
              <el-input type="text" style="width: 200px;" v-model="scoped.row.subtitle" placeholder="请输入副标题"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="有效期" align="center">
            <template slot-scope="scoped">
              <el-input type="Number" style="width: 200px;" v-model="scoped.row.day" placeholder="请输入有效期"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="售价" align="center">
            <template slot-scope="scoped">
              <el-input type="Number" style="width: 200px;" v-model="scoped.row.money" placeholder="请输入售价">
                <template slot="append">元</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="首次购买售价" align="center">
            <template slot-scope="scoped">
              <div class="flex-center">
                <el-checkbox-group v-model="scoped.row.first" @change="changeFirst($event,scoped.row)">
                  <el-checkbox label="1">启用</el-checkbox>
                </el-checkbox-group>
                <el-input class="mar_l10" type="Number" style="width: 150px; margin-bottom: 6px;" v-model="scoped.row.firstMoney" :disabled="!scoped.row.first.length">
                  <template slot="append">元</template>
                </el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scoped">
              <el-button type="text" @click="del(scoped.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="text" @click="addRuls">添加规格</el-button>
      </el-form-item>
    </el-form>
    <div class="mar_t20 ba_f pad_20 t_c">
      <el-button type="primary" @click="submitForm">保存</el-button>
    </div>
    <attachment-img ref="attachmentImg" @attachment="callBack"></attachment-img>
  </div>
</template>

<script>
import attachmentImg from '@/plugins/attachment-img';
import CustomUpload from '@/components/custom-upload.vue';
import { getConfig, postConfig } from '@/api/setup.js';
export default {
  components: {
    CustomUpload,
    attachmentImg
  },
  data() {
    return {
      dialogVisible: false,
      formData: {
        ident: 'payVip',
        name: '',
        title: '',
        notice: '',
        introduction: '',
        dayArr: [],
        vipBg: ''
      },
      rules: {
        name: [{ required: true, message: '请输入会员卡名称', trigger: 'blur' }],
        subtitle: [{ required: true, message: '请输入会员卡副标题', trigger: 'blur' }],
        introduction: [{ required: true, message: '请输入会员简介', trigger: 'blur' }],
        dayArr: [{ required: true, message: '请创建规格', trigger: 'blur' }]
      }
    };
  },
  created() {
    getConfig({
      ident: 'payVip'
    }).then((res) => {
      if (res.code == 1) {
        res.data.dayArr.map((item) => {
          if (item.first == 1) {
            item.first = ['1'];
          } else {
            item.first = [];
          }
          return item;
        });
        Object.assign(this.formData, res.data);
      }
    });
  },
  methods: {
    openImg() {
      this.$refs.attachmentImg.dialogVisible = true;
    },
    callBack(msg) {
      this.formData.vipBg = msg.str;
    },
    changeFirst(msg, row) {
      if (!msg.length) {
        row.firstMoney = 0;
      } else {
        row.firstMoney = 1;
      }
    },
    addRuls() {
      const obj = {
        title: '',
        subtitle: '',
        day: 0,
        money: 0,
        first: [],
        firstMoney: 0
      };
      this.formData.dayArr.push(obj);
    },
    del(index) {
      this.formData.dayArr.splice(index, 1);
    },
    submitForm() {
      const obj = JSON.parse(JSON.stringify(this.formData));
      obj.dayArr.map((item) => {
        if (item.first.length) {
          item.first = 1;
        } else {
          item.first = 2;
        }
        return item;
      });
      this.$refs.formData.validate((flag) => {
        if (flag) {
          postConfig(obj).then((res) => {
            if (res.code == 1) {
              this.$baseMessage('保存成功！', 'success');
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped></style>